<template>
	<button class="btn" :class="className" hover-class="btn-hover" :style="{
		width: `${width}rpx`,
		height: `${height}rpx`
	}" @click="click" :open-type="isPhone? 'getPhoneNumber' : ''" @getphonenumber="onGetphonenumber">
		<slot></slot>
	</button>
</template>

<script>
	import UserApi from "@/api/user.js"
	export default {
		props: {
			type: {
				type: String,
				default: "primary"
			},
			width: {
				type: String,
				default: "552"
			},
			height: {
				type: String,
				default: "80"
			},
			isPhone: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			className() {
				return `btn-${this.type}`
			}
		},
		data() {
			return {
				click() {
					this.$emit("onclick")
				}
			};
		},
		methods: {
			onGetphonenumber(e) {
				console.log(e)
				if(e.detail.errMsg == "getPhoneNumber:ok") {
					UserApi.PostAccreditPhone(e.detail)
						.then((res)=>{
							let userData = uni.getStorageSync("userData");
							userData.login_token = res.login_token;
							uni.setStorageSync("userData", userData);
							this.$store.commit('setUserAccredit', false);
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
							// 用户按了允许授权按钮
							this.$emit("colse")
						})
						.catch(err=>{
							console.log(err.toString());
						})
				}else {
					this.$emit("colse")
				}
			}
		}
	}
</script>

<style lang="scss">
/*按钮样式*/

.btn{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10rpx;
	font-size: $font-size-lg;
	line-height: $font-size-lg;
}

.btn-primary {
	color: $text-color;
	background-color: $color-primary;
	box-shadow: 6rpx 6rpx 8rpx rgba($color-primary, .3);
}

.btn-main{
	color: $color-white;
	background-color: $color-main;
	box-shadow: 6rpx 6rpx 8rpx rgba($color-main, .3);
}

.btn-hover {
	transform: translate(1px, 1px);
}

.btn-gray {
	background: #ededed;
	color: #999 !important;
}

.btn-gray-hover {
	background: #d5d5d5 !important;
	color: #898989;
}

.btn-white {
	background: #fff;
	color: #333 !important;
}

.tui-white-hover {
	background: #e5e5e5 !important;
	color: #2e2e2e !important;
}

.btn-disabled {
	color: #fafbfc !important;
	background: linear-gradient(-90deg, #cad8fb, #c9d3fb);
}

</style>
